<extend name="Public/base"/>

<block name="content">
    <style>
        .wechat_box{
            border-top: 5px solid #F1F3F4;
            padding: 1rem;
            background: #fff;
            height: 100%;
            overflow-y: auto;
        }
        .wechat_box .headuser{
            width: 4rem;
            padding: .1rem;
        }
        .send_box,.reply_box{
            display: flex;
            align-items:flex-start;
            margin: .5rem 0;
        }
        .send_box>div,.reply_box>div{
            padding: .8rem .5rem 0;
        }
        .send_box>div{
            padding-right: .7rem;
            width: 90%;
            word-break: break-all;
            text-align: left;
        }
        .reply_box>div{
            padding-left: .7rem;
            width: 90%;
            word-break: break-all;
            text-align: right;
        }
        .send_box{
            justify-content: flex-start;
        }
        .reply_box{
            justify-content: flex-end;
        }
    </style>
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">{$title}</strong>  <small></small></div>
            </div>
            <hr/>
            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-8 am-u-md-push-1">
                    <form class="am-form am-form-horizontal" action="{:U('chat_reply')}" method="post" >
                        <input type="hidden" name="chat_id" value="{$chat_id}">
                        <div class="am-form-group" style="height: 60rem;border: 1px solid red">
                            <section class="wechat_box">
                                <volist name="reply" id="vo">
                                    <if condition="$vo.person eq 'admin'">
                                        <div class="reply_box">
                                            <div>{$vo.content}</div>
                                            <img src="/Public/Home/images/hd/vuser.png" class="headuser" alt="">
                                        </div>
                                        <else />
                                        <div class="send_box">
                                            <img src="/Public/Home/images/hd/userc.png"  class="headuser" alt="">
                                            <div>{$vo.content}</div>
                                        </div>
                                    </if>
                                </volist>

                            </section>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-12">
                                <input type="text" id="content" placeholder="请输入回复内容" required name="content" value="" style="width:80%;display: inline-block">
                                <button type="submit" class="am-btn am-btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <script>
        $(function () {
            $(".wechat_box").animate({
                scrollTop: $('.wechat_box').prop("scrollHeight")
            }, 1000);
            var form = $('form');

            $('form').submit(function (e) {
                e.preventDefault();
                var content = $("#content").val()
                if (content == ''){
                    alert('请输入内容');
                    return false
                }
                $.post(form.attr('action'),form.serialize(),function (data) {
                    layer.msg(data.msg,{time:1000},function () {
                        if(data.code){
                            return false;
                        }else{
                            $("#content").val('')
                            var str = ` <div class="reply_box">
                                            <div>`+content+`</div>
                                            <img src="/Public/Home/images/hd/vuser.png" class="headuser" alt="">
                                        </div>`;
                            $(".wechat_box").append(str)
                            $(".wechat_box").animate({
                                scrollTop: $('.wechat_box').prop("scrollHeight")
                            }, 1000);
                        }
                    })

                },'json')
            })
        })
    </script>
</block>